<template>
  <div id="chartId" style="width: 100%;height: 500px;">
4444444
  </div>
</template>

<script setup name="courseList">
// 这里的name是为了做页面缓存，其值要跟路由里面的name值一样

import { nextTick, ref, watch, onActivated, reactive, onMounted } from 'vue'
import { getCouseList } from '@/api/user'
import { useUserStore } from '@/pinia/modules/user'
import { useFramStore } from '@/pinia/modules/farm'
import { message } from '@/utils/element'
import * as echarts from 'echarts';

const userStore = useUserStore()
const framStore = useFramStore()

const twRef = ref(null)
const time = ref('')
let option11= {
    grid: {
      show: true,
      backgroundColor: 'transparent',
      opacity: 0.3,
      borderWidth: '0',
      top: '36%',
      bottom: '36%',
      left: '5%',
      right: '5%'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      show: false
    },
    xAxis: [
      // 星期
      {
        name: '星期',
        nameTextStyle: {
          fontSize: 0,
        },
        type: 'category',
        boundaryGap: false,
        position: 'top',
        offset: 110,
        zlevel: 100,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          interval: 0,
          formatter: [
            '{a|{value}}'
          ].join('\n'),
          rich: {
            a: {
              // color: 'white',
              fontSize: 14
            }
          }
        },
        data: new Array(15).fill(null)
      },
      // 日期
      {
        name: '日期',
        nameTextStyle: {
          fontSize: 0,
        },
        type: 'category',
        boundaryGap: false,
        position: 'top',
        offset: 80,
        zlevel: 100,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          interval: 0,
          formatter: [
            '{a|{value}}'
          ].join('\n'),
          rich: {
            a: {
              color: '#aaa',
              fontSize: 12
            }
          }
        },
        data: new Array(15).fill(null)
      },
      // 白天天气
      {
        name: '白天天气',
        nameTextStyle: {
          fontSize: 0,
        },
        type: 'category',
        boundaryGap: false,
        position: 'top',
        offset: 50,
        zlevel: 100,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          interval: 0,
          formatter: [
            '{a|{value}}'
          ].join('\n'),
          rich: {
            a: {
              // color: 'white',
              fontSize: 14
            }
          }
        },
        data: new Array(15).fill(null)
      },
      // 白天图标
      {
        name: '白天图标',
        nameTextStyle: {
          fontSize: 0,
        },
        type: 'category',
        boundaryGap: false,
        position: 'top',
        offset: 10,
        zlevel: 100,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          interval: 0,
          formatter: function (value) {
            return '{symbol|}<img src="https://d.scggqx.com/forecast/img/%E9%98%B4.png" /> {name|销量}'
          },
          //预留rich对象
          rich: {
            symbol: {
                // 这里可以定义图片的样式，如图片路径、大小等
                image: 'https://d.scggqx.com/forecast/img/%E9%98%B4.png',
                width: 20, // 图片宽度
                height: 20 // 图片高度
            }
          },
          itemStyle: {
            // 使用定义的富文本样式
            color: '#fff',
            backgroundColor: 'transparent',
            padding: [5, 10],
            borderRadius: 5,
            // 使用富文本标签来展示图片和文字
            formatter: '{symbol|}<img src="https://d.scggqx.com/forecast/img/%E9%98%B4.png" /> {name|销量}'
        }
        },
        // data: this.weatherdata.weather
        data: new Array(15).fill('1111')
      },
      // 夜间图标
      {
        name: '夜间图标',
        nameTextStyle: {
          fontSize: 0,
        },
        type: 'category',
        boundaryGap: false,
        position: 'bottom',
        offset: 10,
        zlevel: 100,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          interval: 0,
          formatter: function (value) {
            return `{icon${value}|}`
          },
          //预留rich对象
          rich: {}
        },
        // data: this.weatherdata.weather
        data: new Array(15).fill(null)
      },
      // 夜间天气
      {
        name: '夜间天气',
        nameTextStyle: {
          fontSize: 0,
        },
        type: 'category',
        boundaryGap: false,
        position: 'bottom',
        offset: 50,
        zlevel: 100,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          interval: 0,
          formatter: [
            '{a|{value}}'
          ].join('\n'),
          rich: {
            a: {
              // color: 'white',
              fontSize: 14
            }
          }
        },
        data: new Array(15).fill(null)
      },
      // 风向
      {
        name: '风向',
        nameTextStyle: {
          fontSize: 0,
        },
        type: 'category',
        boundaryGap: false,
        position: 'bottom',
        offset: 80,
        zlevel: 100,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          interval: 0,
          formatter: [
            '{a|{value}}'
          ].join('\n'),
          rich: {
            a: {
              // color: 'white',
              fontSize: 12
            }
          }
        },
        data: new Array(15).fill(null)
      },
      // 风级
      {
        name: '风级',
        nameTextStyle: {
          fontSize: 0,
        },
        type: 'category',
        boundaryGap: false,
        position: 'bottom',
        offset: 105,
        zlevel: 100,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          interval: 0,
          formatter: [
            '{a|{value}级}'
          ].join('\n'),
          rich: {
            a: {
              color: '#aaa',
              fontSize: 12
            }
          }
        },
        data: new Array(15).fill(null)
      },
    ],
    yAxis: {
      type: 'value',
      show: false,
      axisLabel: {
        formatter: '{value} °C',
        color: 'white'
      }
    },
    series: [
      {
        name: '最高气温',
        type: 'line',
        data: new Array(15).fill(0),
        symbol: 'emptyCircle',
        symbolSize: 6,
        showSymbol: true,
        smooth: true,
        itemStyle: {
          color: 'orange'
        },
        label: {
          show: true,
          position: 'top',
          color: 'orange',
          formatter: '{c}'
        },
        lineStyle: {
          width: 1,
        },
        areaStyle: {
          opacity: 1,
          color: 'transparent'
        }
      },
      {
        name: '最低气温',
        type: 'line',
        data: new Array(15).fill(0),
        symbol: 'emptyCircle',
        symbolSize: 6,
        showSymbol: true,
        smooth: true,
        itemStyle: {
          color: 'dodgerblue'
        },
        label: {
          show: true,
          position: 'bottom',
          color: 'dodgerblue',
          formatter: '{c}'
        },
        lineStyle: {
          width: 1,
        },
        areaStyle: {
          opacity: 1,
          color: 'transparent'
        }
      },
    ]
  }
  var option = {
  grid: [
    {
      left: '-15px',
      right: '-15px',
      bottom: '-90px',
      top: '0px',
      containLabel: true
    }
  ],
  xAxis: [
    {
      type: 'category',
      position: 'bottom',
      offset: -25,
      zlevel: 100,
      boundaryGap: false,
      axisTick: {
        show: false
      },
      axisLabel: {
        show: true,
        interval: 1,
        rotate: '0',
        fontSize: 12,
        color: '#666'
      },
      axisLine: {
        show: true,
        lineStyle: {
          textAlign: 'left',
          color: 'rgba(0,0,0,.4)'
        }
      },
      data: [
        ' ',
        ' ',
        '现在',
        '13:00',
        '14:00',
        '15:00',
        '16:00',
        '17:00',
        '18:00',
        '19:00',
        '20:00',
        '21:00',
        '22:00',
        '23:00',
        '00:00',
        '01:00',
        '02:00',
        '03:00',
        '04:00',
        '05:00',
        '06:00',
        '07:00',
        '08:00',
        '09:00',
        '10:00',
        '11:00',
        '12:00',
        ' '
      ]
    },
    {
      type: 'category',
      boundaryGap: false,
      position: 'bottom',
      offset: -90,
      zlevel: 100,
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        interval: 0,
        formatter: function (value, index) {
          return '{' + index + '| }\n{b|' + value + '}';
        },
        rich: {
          3: {
            backgroundColor: {
              image: 'https://d.scggqx.com/forecast/img/阴.png'
            },
            height: 20,
            width: 20
          },
          7: {
            backgroundColor: {
              // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[2]] + '.png')
              image: 'https://d.scggqx.com/forecast/img/阴.png'
            },
            height: 20,
            width: 20
          },
          11: {
            backgroundColor: {
              // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[3]] + '.png')
              image: 'https://d.scggqx.com/forecast/img/小雨.png'
            },
            height: 20,
            width: 20
          },
          18: {
            backgroundColor: {
              // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[4]] + '.png')
              image: 'https://d.scggqx.com/forecast/img/多云.png'
            },
            height: 20,
            width: 20
          },
          b: {
            color: 'white',
            fontSize: 12,
            lineHeight: 30,
            height: 20
          }
        }
      },
      nameTextStyle: {
        fontWeight: 'bold',
        fontSize: 19
      },
      // data: this.weatherdata.weather
      data: [
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        ''
      ]
    },
    {
      type: 'category',
      boundaryGap: false,
      position: 'bottom',
      offset: -50,
      zlevel: 100,
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        interval: 0,
        formatter: ['{a|{value}}'].join('\n'),
        rich: {
          a: {
            color: '#666',
            fontSize: 10
          }
        }
      },
      nameTextStyle: {},
      data: [
        '',
        '降水概率',
        '14%',
        '',
        '13%',
        '',
        '13%',
        '',
        '13%',
        '',
        '13%',
        '',
        '13%',
        '',
        '13%',
        '',
        '13%',
        '',
        '13%',
        '',
        '13%',
        '',
        '13%',
        '',
        '13%',
        '',
        '12%',
        ''
      ]
    }
  ],
  yAxis: {
    max: 100,
    splitLine: {
      show: false
    },
    axisLabel: {
      show: false
    }
  },
  visualMap: {
    type: 'piecewise',
    show: false,
    dimension: 0,
    seriesIndex: 0
  },
  series: [
    {
      type: 'line',
      smooth: true,
      // symbol: 'none',
      symbolSize: 0,
      showSymbol: true,
      lineStyle: {
        color: '#5470C6',
        width: 0.1
      },
      // markLine: {
      //     silent:true,
      //     symbol: ['none', 'none'],
      //     label: {
      //     show: true,
      //     position: 'end',
      //     normal: {
      //         distance: -20,
      //         // lineHeight: 60,
      //         // backgroundColor: '#fff',
      //         position: 'end',
      //         formatter: function (param:any) {
      //         return `${param.name} \r ${param.name}`;
      //         }
      //     }
      //     },
      //     lineStyle: {
      //     color: 'rgba(255,255,255,.5)',
      //     dashOffset: 40
      //     },
      //     data: [{ xAxis: 7, name: '今天' }]
      // },
      label: {
        show: true,
        color: '#666',
        position: 'top',
        formatter: '{c} °'
        // formatter: function (params) {
        //   return params[0];
        //   return '{c} °C'
        // }
      },
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(30, 90, 246, .8)'
          },
          {
            offset: 0.1,
            color: 'rgba(30, 90, 246, .5)'
          },
          {
            offset: 1,
            color: 'rgba(30, 90, 246, 0)'
          }
        ])
      },
      data: [
        0, 70, 70, 72, 82, 69, 83, 79, 83, 80, 70, 80, 70, 80, 70, 72, 82, 69,
        83, 79, 83, 80, 70, 80, 70, 80, 80, 0
      ]
    }
  ]
};

onMounted(() => {
  var chartDom = document.getElementById('chartId');
  var myChart = echarts.init(chartDom);

  option && myChart.setOption(option);
})


</script>

  <style lang="scss" scoped>

  </style>

